<template>
  <div>
    <v-dialog v-model="dialog" width="400">
      <div class="dialog">
        <div class="d-flex align-center justify-center text-h6 colorBlack" style="height: 80px">
          {{
            dialogState === "pledge" ? $t("Page.Staking.Pledge") : $t("Page.Staking.cancelPledge")
          }}
          SCT
        </div>

        <div class="price-card">
          <v-container class="grey">
            <v-row no-gutters>
              <v-col cols="12" z sm="6">
                <div class="price-card-text">
                  <p class="Subtitle">
                    {{
                      dialogState === "pledge"
                        ? $t("Page.Staking.Pledge")
                        : $t("Page.Staking.cancelPledge")
                    }}
                  </p>

                  <v-text-field
                    class="mr-10"
                    background-color="#000"
                    v-model="PledgeCount"
                    ref="observer"
                    :rules="rules"
                    type="number"
                    hide-details="auto"
                    v-if="dialogState === 'pledge'"
                  ></v-text-field>
                  <p class="price" v-else>{{ currentPledgeCount | numFormats }}</p>
                </div>
              </v-col>

              <v-divider vertical></v-divider>

              <v-col cols="12" z sm="6">
                <div class="price-card-text" style="text-align: right">
                  <p class="Subtitle">
                    {{ $t("Page.Staking.remainingSum") }} :
                    <span class="font-weight-bold" style="color: #000">{{ balance }}</span>
                  </p>
                  <div class="d-flex align-center justify-end">
                    <v-chip
                      color="#fe9013"
                      class="colorWhite"
                      style="height: 25px; cursor: pointer"
                      v-ripple
                      @click="handlePledgeMax"
                      >MAX</v-chip
                    >
                    <span class="text-h6 font-weight-bold pl-2">SCT</span>
                  </div>
                </div>
              </v-col>
            </v-row>
          </v-container>
        </div>

        <div class="pa-4" v-if="Number(balance) < 500 && dialogState === 'pledge'">
          <p class="colorBlack font-weight-bold">
            {{ $t("Page.Staking.noTokens") }}：
            <span class="colorText" @click="$router.push({ name: 'swap' })">
              {{ $t("Page.Staking.toObtain") }}</span
            >
          </p>
        </div>

        <div
          class="annualized d-flex justify-space-between align-center ma-4 pa-2 font-weight-bold"
          v-if="dialogState === 'pledge'"
        >
          <p class="caption colorText">{{ $t("Page.Staking.annualizedReturn") }}</p>
          <p class="h6 colorText">{{ apy }}%</p>
        </div>
        <div class="px-4 pa-10">
          <v-btn
            class="colorWhite"
            block
            large
            rounded
            elevation="2"
            :disabled="Number(PledgeCount) < 500 && dialogState === 'pledge'"
            color="#ac8250"
            @click="submit"
          >
            {{ $t("Page.Staking.validate") }}
          </v-btn>
        </div>
      </div>
    </v-dialog>
  </div>
</template>

<script>
import { InitContractSigner, numFormat, request } from "../../../utils/wallet";
import { mdiCloseCircleOutline } from "@mdi/js";
import { getBalanceOf, beginPledge } from "../../../utils/wallet";
export default {
  props: {
    pond: {
      type: Number,
      default: 1,
    },
    currentPledgeCount: {
      type: Number,
      default: 0,
    },
    dialogState: {
      type: "pledge" | "cancelPledge",
      default: "pledge",
    },
    apy: {
      type: String,
      default: "--",
    },
  },
  filters: {
    numFormats(val) {
      return numFormat(val);
    },
  },
  data() {
    return {
      dialog: false,
      balance: 0,
      icons: {
        mdiCloseCircleOutline,
      },
      PledgeCount: 0,
      rules: [
        v => !!v || "质押数量不可为空",
        v => v <= 5000000 || "超过最大值",
        v => v >= 500 || "低于最小值",
        v => v <= Number(this.balance) || "高于余额",
      ],
    };
  },
  mounted() {
    this.getBalance();
  },
  methods: {
    async getBalance() {
      const balance = await getBalanceOf(this.ethAddress);
      this.balance = Number(balance).toFixed(4);
    },
    handlePledgeMax() {
      this.PledgeCount = this.balance;
    },
    async submit() {
      this.changeOverlay(true);
      if (this.dialogState === "cancelPledge") {
        try {
          const PledgeContract = InitContractSigner();

          await PledgeContract.unStake(this.pond);
          await request(1000 * 13);
          this.$emit("pledgeSuccess");
        } catch (error) {
          console.log(error);
        }

        this.changeOverlay(false);
        this.dialog = false;
        return;
      }
      const validate = await this.$refs.observer.validate();

      if (
        validate &&
        this.balance > 500 &&
        this.PledgeCount >= 500 &&
        this.PledgeCount <= 5000000
      ) {
        const PledgeResult = await beginPledge(this.pond, this.ethAddress, this.PledgeCount);
        if (PledgeResult) {
          this.$emit("pledgeSuccess");
          this.dialog = false;
        }
      }

      this.changeOverlay(false);
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  width: 100%;
  min-height: 400px;
  background: #fff;
  background-image: url("../../../assets/images/png/CardBack.png");
  background-repeat: no-repeat;
  background-size: 100% 80px;
  border-radius: 20px;
  .price-card {
    width: 90%;
    margin-left: 5%;
    margin-top: 40px;
    height: 100px;
    border-radius: 5px;
    background: #fff;
    background-image: url("../../../assets/images/png/xx2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .grey {
      height: 100%;
      .price-card-text {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        height: 76px;
        .Subtitle {
          font-size: 13px;
          color: rgba(79, 79, 79, 1);
        }

        .price {
          font-size: 22px;
          font-weight: 600;
          color: #000;
        }
      }
    }
  }
  .annualized {
    border-radius: 5px;
    border: 0.5px solid rgba(173, 130, 80, 0.2);
  }
  .colorBlack {
    color: black;
  }
  .colorWhite {
    color: white;
  }
  .colorText {
    color: rgba(173, 130, 80, 1);
    cursor: pointer;
  }
}
.close {
  position: absolute;
  bottom: -20px;
}

::v-deep .v-text-field__slot {
  background: #fefbf5;
}

::v-deep .v-text-field__details {
  display: block !important;
  .v-messages__message {
    line-height: 20px;
  }
}
</style>
